<script setup lang="ts">
import {computed} from "vue"
import { IPackNifi } from '../../inter';
import {DEFAULT_CELL_NAME} from "../metadata"
import {t} from "../../i18n/index"
// import { ref } from 'vue';

const { nifi } = defineProps<Pick<IPackNifi.CellProps,'nifi'>>();
//
const mode = computed(() => nifi.graph.mode.value);
const sn = nifi.Select.selectCount
const cn = nifi.Select.copyCount;
//
const showParams = nifi.group.component?.parameterContext?.id != undefined

// 粘贴 取消复制 刷新 查看 编辑 清空列数据 开始 停止 启用 禁用 启用所有控制器服务 禁用所有控制器服务 创建模板 上传模板
const handlePaster = () => {nifi.Select.paster(nifi.contextmenu.getLocalPos());}
// const handleCenter = () => {}
const handleRefresh = () => {nifi.group.refresh();}
const handleFit = () => {nifi.graph.scaleTo('=');}
const handleSelectAll = () => {nifi.Select.select();}
const handleSelectInverse = () => {nifi.Select.inverse();}



const handleParameter = () => {nifi.Parameters.open();}
const handleVariable = () => {}
//
const handleView = () => {nifi.cells.processGroups.view()}
const handleEdit = () => {nifi.cells.processGroups.edit()}
const handleStart = () => {nifi.cells.processGroups.start();}
const handleStop = () => {nifi.cells.processGroups.stop();}
const handleEnable = () => {nifi.cells.processGroups.enable();}
const handleDisable = () => {nifi.cells.processGroups.disable();}
const handleClearQuene = () => {nifi.cells.processGroups.clear();}
//
const handleOpenCS = () => {nifi.ControlService.open();}
const handleEnableCS = () => {nifi.ControlService.enableAll();}
const handleDisableCS = () => {nifi.ControlService.disableAll();}
const handleUploadTemp = () => {}
const handleCreateTemp = () => {}

</script>


<template>
    
    <div v-if="mode == 'prod'" class="w-fit h-fit">
        <div class="flex items-center icon-btn" @click="handleRefresh"><i></i><span>{{ t('cells-contextmenu-refresh') }}</span></div>
        <div class="flex items-center icon-btn" @click="handleFit"><i></i><span>{{ t('cells-contextmenu-fit-canvas') }}</span></div>
        <div class="h-1px bg-gray-200 m-y-4px"></div>
        <div class="flex items-center icon-btn" @click="handleView"><i></i><span>{{ t('cells-contextmenu-view') }}</span></div>

    </div>
    <div v-else class="relative w-fit gap-x-20px max-h-240px flex flex-col flex-wrap">
        
        <div v-if="cn > 0" class="flex items-center icon-btn" @click="handlePaster"><i></i><span>{{ t('cells-contextmenu-paster') }}</span></div>
        <div v-if="cn > 0" class="h-1px bg-gray-200 m-y-4px"></div>
        <div class="flex items-center icon-btn" @click="handleRefresh"><i></i><span>{{ t('cells-contextmenu-refresh') }}</span></div>
        <div class="flex items-center icon-btn" @click="handleFit"><i></i><span>{{ t('cells-contextmenu-fit-canvas') }}</span></div>
        <div class="flex items-center icon-btn" @click="handleSelectAll"><i></i><span>{{ t('cells-contextmenu-select-all') }}</span></div>
        <div v-if="sn > 0" class="flex items-center icon-btn" @click="handleSelectInverse"><i></i><span>{{ t('cells-contextmenu-select-other') }}</span></div>
        
        <div v-if="showParams" class="h-1px bg-gray-200 m-y-4px"></div>
        <div v-if="showParams" class="flex items-center icon-btn" @click="handleParameter"><i></i><span>{{t('cells-contextmenu-parameter')}}</span></div>
        <!-- <div class="flex items-center icon-btn" @click="handleVariable"><i></i><span>变量管理</span></div> -->
        <div class="h-1px bg-gray-200 m-y-4px"></div>
        <div class="flex items-center icon-btn" @click="handleEdit"><i></i><span>{{t('cells-contextmenu-edit')}}</span></div>
        <div class="flex items-center icon-btn" @click="handleStart"><i></i><span>{{t('cells-contextmenu-start-all')}}</span></div>
        <div class="flex items-center icon-btn" @click="handleStop"><i></i><span>{{t('cells-contextmenu-stop-all')}}</span></div>
        <div class="flex items-center icon-btn" @click="handleEnable"><i></i><span>{{t('cells-contextmenu-enable-all')}}</span></div>
        <div class="flex items-center icon-btn" @click="handleDisable"><i></i><span>{{t('cells-contextmenu-disable-all')}}</span></div>
        <div class="flex items-center icon-btn" @click="handleClearQuene"><i></i><span>{{t('cells-contextmenu-clear-all-quene')}}</span></div>
        <div class="h-1px bg-gray-200 m-y-4px"></div>
        <div class="flex items-center icon-btn" @click="handleOpenCS"><i></i><span>{{t('cells-contextmenu-cs')}}</span></div>
        <div class="flex items-center icon-btn" @click="handleEnableCS"><i></i><span>{{t('cells-contextmenu-enable-all-cs')}}</span></div>
        <div class="flex items-center icon-btn" @click="handleDisableCS"><i></i><span>{{t('cells-contextmenu-disable-all-cs')}}</span></div>
        <!-- <div class="h-1px bg-gray-200 m-y-4px"></div>
        <div class="flex items-center icon-btn" @click="handleUploadTemp"><i></i><span>上传模板</span></div>
        <div class="flex items-center icon-btn" @click="handleCreateTemp"><i></i><span>创建模板</span></div> -->
        <!-- <div class="h-1px bg-gray-200 m-y-4px"></div> -->
        
    </div>
</template>